<template>
 <div class="BizTriggerRelevancy">
  <div style="padding:10px;margin: 6px 10px 0;">
    <SearchComponent :searchConfig="bizTriggerSearchConfig" @resetFn="reset" @searchFn="queryFn">
      <template #Biz>
          <el-select v-model="selectBizId" placeholder="业务" style="width: 100%">
            <el-option v-for="item in bizOptions" :key="item.bizId" :label="item.bizName" :value="item.bizId" />
          </el-select>
        </template>
    </SearchComponent>
  </div>
  <div class="content">
    <TableComponent v-loading="isLoading" :assetList="tableDataList" :tableColumns="tableColumns"
          element-loading-text="加载中...">
          <template #operation="{ row }">
            <el-button size="small" type="text" @click="releatFn(row)">
              关联trigger
            </el-button>
            <el-popconfirm title="确定要删除吗?" @confirm='deleteFn(row)'>
              <template #reference>
                <el-button size="small" style="color:#f00;" type="text">取消关联</el-button>
              </template>
            </el-popconfirm>
          </template>
        </TableComponent>
        <el-pagination style="margin-top: 20px;float: right" background layout="total, prev, pager, next" :total="pageData.total"
          :currentPage="pageData.current" :page-size="pageData.size" @current-change="handlePageChange">
        </el-pagination>
  </div>
  <el-dialog v-model="dialogVisible" title="关联trigger" width="40%" @close="cancelFn">
    <el-form ref="ruleFormRef" label-width="120px" :model="submitData" :rules="rules">
      <el-form-item label="业务" >
        <span>{{ currentRow.bizName }}</span>
      </el-form-item>
      <el-form-item label="关联trigger" prop="triggerId">
        <el-input v-model="submitData.triggerId" />
      </el-form-item>
    </el-form>
    <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancelFn">取消</el-button>
                <el-button type="primary" @click="submitFn">
                    提交
                </el-button>
            </span>
        </template>
  </el-dialog>
 </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { ref,reactive, onMounted} from 'vue'
import SearchComponent from '@/components/SearchComponent.vue';
import { bizTriggerSearchConfig } from '@/constant/config.js';
import { queryBizTriggerByPage, createBizTrigger,deleteApi } from '@/api/bizTriggerApi.js';
import { queryBizList } from '@/api/fileListApi.js';
import TableComponent from '@/components/TableComponent.vue';
import { tableColumns } from '@/constant/bizTriggerRelevancy.js'
import {removeNull} from "@/utils/util";

const selectBizId = ref(null)
const bizOptions =ref([])
const isLoading = ref(false)
const tableDataList = ref([])
const pageData = reactive({
  total: 0,
  current: 1,
  size: 10
})
const filterObj = ref({})
let dialogVisible = ref(false)
let currentRow = reactive({})
let submitData = reactive({
  triggerId: ''
})
const rules = reactive({
  triggerId: [{ required: true, message: '请输入triggerId', trigger: 'blur' }],
})
let ruleFormRef =ref(null)
// 查询业务的下拉选项
const getBizList = () => {
  queryBizList().then((res) => {
    if (res.data.code === 200) {
      let response = res.data.data;
      bizOptions.value = response;
    }
  })
};
// 获取列表接口
const getPageData = (size = 10) => {
  isLoading.value = true
  queryBizTriggerByPage({
    current: pageData.current,
    szie: size,
    ...removeNull(filterObj.value),
  }).then(res => {
    if (res.data.code === 200) {
      tableDataList.value = res.data.data.records;
      pageData.total = res.data.data.total;
      isLoading.value = false
    }
  })
};
// 重置
const reset = () => {
  selectBizId.value = null;
  filterObj.value = {};
  pageData.current = 1;
  getPageData()
}
// 查询
const queryFn = (para) => {
  filterObj.value = {
    ...para,
    bizId: selectBizId
  }
  getPageData()
}
// 关联
const releatFn = (row) => {
  dialogVisible.value = true;
  currentRow =row
  submitData.triggerId = row.triggerId || ''
}
// 删除文件
const deleteFn = (row) => {
  deleteApi(row.relId).then(res => {
    if (res.data.code === 200) {
      ElMessage({
        type:'success',
        message: '删除成功'
      })
      getPageData()
    }else {
      ElMessage({
        type:'error',
        message: '删除失败'
      })
    }
  })
};
const handlePageChange = (val) => {
  pageData.current = val;
  getPageData();
};

// 向后端发起请求，提交form数据和file文件
const submitFn = () => {
  let createBy = '';
  try {
    createBy = JSON.parse(localStorage.getItem('userInfo')).employeeId;
  } catch (e) {
  }
  let req = {
    bizId: currentRow.bizId,
    triggerId: submitData.triggerId,
    createBy
  }
  createBizTrigger(req).then((res) => {
      if (res.data.code === 200) {
        ElMessage({
          message: '关联成功',
          type: 'success',
        })
        getPageData()
      }else{
        ElMessage({
          message: '关联失败',
          type: 'error',
        })
      }
      cancelFn()
    })
}

//取消 、关闭弹窗
const cancelFn = () => {
  dialogVisible.value = false
  // 表单初始化
  submitData.triggerId = '';
  ruleFormRef.value.clearValidate()
}
onMounted(() => {
  getBizList()
  getPageData()
})

</script>
<style lang="less" scoped>
    .content {
    padding: 0 20px;
    }
</style>